<template>
  <div class="text-center">
    <div class="relative">
      <i :class="`${icon} text-6xl text-${color} mb-4 animate-pulse`"></i>
      <div 
        class="absolute top-0 left-1/2 transform -translate-x-1/2 w-16 h-16 border-4 border-t-transparent rounded-full animate-spin"
        :class="`border-${color}`"
      ></div>
    </div>
    <p class="text-gray-400 cyber-text">{{ text }}</p>
    <div class="mt-4 flex justify-center space-x-2">
      <div 
        v-for="(_, index) in 3"
        :key="index"
        class="w-2 h-2 rounded-full animate-bounce"
        :class="`bg-${dotColors[index]}`"
        :style="{ animationDelay: `${index * 0.1}s` }"
      ></div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  icon: string
  color: string
  text: string
}

defineProps<Props>()

const dotColors = ['tech-blue', 'tech-purple', 'tech-green']
</script>

